<template>
  <view class="container">
    <view class="refund-status" v-if="status != 6">
      <view class="status-text">
        <view class="icon" style="display: flex;align-items: center;">
          <u-icon v-if="status == 4" color="#FF9500" size="52" name="clock" class="icon-margin-right" />
          <u-icon v-else color="#34C759" size="52" name="checkmark-circle" class="icon-margin-right" />
          <span style="font-size: 30rpx;">{{ status == 4 ? "退款中" : "退款成功" }}</span>
        </view>
        <view class="price text-right" style="font-size: 28rpx;color:#FF9500 ;"> ￥{{ status == 6 ? formData.ebMerActivityTicketPrice : formData.payPrice }} </view>
      </view>
      <view class="activity-expired text-center" v-if="status == 7"> 活动过期，已退款 </view>
      <view v-if=" status == 4" class="return-time text-center" style="font-size: 28rpx;"> 待商家同意后:48小时内按原有付款方式退款 </view>
    </view>
    <view class="order-details card-margin">
      <view class="activity-name">
        {{ formData.ebMerActivityTicketName }}
      </view>
      <view class="details-row">
        <image class="activity-icon" :src="getImg+formData.ebMerActivityIcon"></image>
        <view class="activity-info">
          <p class="activity-text ellipsis">
            {{ formData.ebMerActivityName }}
          </p>
          <p>{{ formData.ebMerName }}</p>
          <view class="quantity-price">
            <view class="quantity">
              数量<span class="text-margin-left"> X{{ status == 6 ? formData.ebMerActivityTicketNum : formData.totalNum }} </span>
            </view>
            <view class="price" @click="getDetail" style="display: flex;">
              实付<span class="real-pay-price text-margin-right"> ￥{{ status == 6 ? formData.ebMerActivityTicketPrice : formData.payPrice }} </span>
              <u-icon name="arrow-right" />
            </view>
          </view>
        </view>
      </view>
      <view v-if="status == 6">
        <refund-info :orderId="orderId" :idd="id" :formData="formData" @onSubmitGo="onSubmitGo" />
      </view>
      <view v-if="status != 6">
        <view class="refund-progress">
          <view class="text-left">
            <span class="bold-text text-margin-right color-primary">
              {{ status == 4 ? "退款中" : "已退款" }}
            </span>
            <span>{{ status == 4 ? "将" : "已" }}退回至原账户</span>
          </view>
          <!-- <view class="text-right">
            <u-icon name="arrow-right" />
          </view> -->
        </view>
        <view class="ticket-codes text-center" v-if="formData.ebMerActivityTicketRecordList">
          <view class="strikethrough-text" v-for="(item, index) of formData.ebMerActivityTicketRecordList" :key="index">
            {{ item.ticketCode }}
          </view>
        </view>
        <order-steps class="steps-margin-top" v-if="status != 6 && formData.storeOrderStatusList" :orderList="formData.storeOrderStatusList"></order-steps>
      </view>
    </view>
    <price-detail ref="priceDetail" :orderId="orderId" />
  </view>
</template>

<script>
import priceDetail from "../../../pages_sh/orderCode/components/price_detail.vue";
import refundInfo from "./refund_info.vue";
// import orderSteps from "./components/order_steps.vue";
import { requestRefund, orderInfoRecord } from "../../../utils/api/local";
import { IMG_URL } from "../../../config/index.js";
export default {
  components: {
    priceDetail,
    refundInfo,
    // orderSteps,
  },
  data() {
    return {      getImg: IMG_URL,
      value: 1,
      textarea: "",
      /** 3.退款成功 6.申请退款 4.退款中 7.超时未完成，已退款 */
      status: 6,
      orderId: "",
      formData: { ebMerName: "" },
      id: "",
    };
  },
  onLoad(option) {
    this.status = parseInt(option.status);
    this.id = option.id;
    this.orderId = option.orderId;
    if (this.status == 6) {
      this.requestRefund(this.orderId);
    } else {
      this.orderInfoRecord();
    }
  },
  methods: {
    /** 详情接口 */
    orderInfoRecord() {
      orderInfoRecord({
        id: this.id,
        orderId: this.orderId,
        userId: uni.getStorageSync('uid'), 
      }).then((res) => {
        this.formData = res.data || {};
      });
    },
    /** 打开订单详情 */
    getDetail() {
      this.$refs.priceDetail.handleOpen();
    },
    requestRefund(orderId) {
      requestRefund({
        orderId,
      }).then((res) => {
        this.formData = res.data || {};
      });
    },
    /** 申请退款提交后改变状态 */
    onSubmitGo() {
      this.status = 4;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  padding: 20rpx;
}

.refund-status {
  margin-bottom: 20rpx;
}

.status-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  font-weight: bold;
}

.icon-margin-right {
  margin-right: 10rpx;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.return-time {
  font-size: 12rpx;
  margin-top: 10rpx;
}

.activity-expired {
  font-size: 16rpx;
  margin-top: 10rpx;
}

.order-details {
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #ffffff;
}

.card-margin {
  margin-top: 20rpx;
}

.details-row {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
}

.activity-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
}

.activity-info {
  margin-left: 20rpx;
  width: calc(100% - 150rpx);
}

.activity-text {
  font-size: 16rpx;
  margin-bottom: 10rpx;
}

.quantity-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.text-margin-left {
  margin-left: 10rpx;
}

.text-margin-right {
  margin-right: 10rpx;
}

.real-pay-price {
  font-size: 16px;
  font-weight: bold;
  color: #ff9500;
}

.refund-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.bold-text {
  font-weight: bold;
}

.color-primary {
  color: #007aff;
}

.ticket-codes {
  margin-top: 20rpx;
}

.strikethrough-text {
  font-size: 16rpx;
  text-decoration: line-through;
  margin-top: 10rpx;
}

.steps-margin-top {
  margin-top: 40rpx;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
